<template>
  <div class="blacktopUpload">
    <div class="uploadContainer">
      <!-- 标题 -->
      <div class="title">
        <div class="icon">
          <img src="@/assets/uploadPicture/icon/记分牌.png" />
        </div>
        <span>记分牌上传</span>
      </div>
      <!-- 文件上传 -->
      <div class="file">
        <!-- 单独上传 -->
        <div class="file-Indiv">
          <div
            class="uploadFile"
            v-for="(data, index) in fileList"
            :key="index"
          >
            <div class="title">
              <div class="uploadBar"></div>
              <span>上传{{ data.name }}</span>
            </div>
            <div class="content">
              <div
                class="uploadButton"
                @click="uploadFilePath('#input-' + index)"
              >
                <img src="@/assets/icon/upload.png" />
              </div>
              <input
                :id="'input-' + index"
                type="file"
                style="display: none"
                :accept="
                  data.name.split('.')[1] != 'iff' ? '.png,.jpg' : '.iff'
                "
                @change="handleFileChangeIndiv(data)"
              />
              <div
                class="filePath"
                :style="{
                  borderBottom:
                    data.filePath != '' ? 'gray 1px solid' : 'transparent',
                }"
              >
                <span>{{ data.filePath }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 整合上传 -->
        <div class="file-Inter">
          <div class="title">
            <div class="uploadBar"></div>
            <span>文件夹整体上传</span>
          </div>
          <div class="content">
            <div
              class="uploadButton"
              @click="uploadFilePath('#file-Inter-Input')"
            >
              <img src="@/assets/icon/upload.png" />
            </div>
            <input
              id="file-Inter-Input"
              type="file"
              style="display: none"
              webkitdirectory
              directory
              @change="handleFileChangeInter(data)"
            />
            <div class="filePath">
              <div v-for="(data, index) in fileList" :key="index">
                {{ data.name }}: {{ data.filePath }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 补充描述 -->
      <div class="describe">
        <div
          class="describeInput"
          v-for="(describe, index) in describeList"
          :key="index"
        >
          <!-- 文本框 -->
          <div class="input">
            <div class="title">
              <div class="uploadBar"></div>
              <span>{{ describe.name }}</span>
            </div>
            <el-input v-model="describe.data" style="width: 200px" />
          </div>
        </div>
      </div>
      <!-- 确认按钮 -->
      <div class="confirm">
        <div class="confirmButton" @click="confirmUpload">
          <img src="@/assets/icon/打勾.png" />
          确认上传
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/*eslint-disable*/
import { getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import uploadApi from "@/api/uploadApi.js";

export default {
  name: "记分牌上传",
  data() {
    return {
      fileList: [
        {
          name: "newscorebug.iff",
          filePath: "",
        },
        {
          name: "预览图.jpg",
          filePath: "",
        },
      ],
      describeList: [
        {
          name: "资源名称",
          data: "记分牌",
        },
        {
          name: "资源作者",
          data: "未知",
        },
      ],
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();
    function confirmUpload() {
      // 文件齐全检查
      if (!isFileComplete()) return;
      // 上传总起
      let list = [];
      proxy.describeList.forEach((element) => {
        list.push(element);
      });
      uploadApi.uploadFileRun(proxy.fileList, list, "scoreboard");
    }

    // 文件选择框开启
    function uploadFilePath(id) {
      document.querySelector(id).click();
    }

    // 文件选择结果处理-单个文件
    function handleFileChangeIndiv(target) {
      const files = event.target.files;
      files.length > 0 && (target.filePath = files[0].path);
    }

    // 文件选择结果处理-文件夹
    function handleFileChangeInter() {
      // 清空旧文件路径
      proxy.fileList.forEach((element) => {
        element.filePath = "";
      });
      // 文件夹识别
      uploadApi.folderFileIdentify(
        event.target.files,
        proxy.fileList,
        false,
        (resultList) => {
          // 文件匹配
          proxy.fileList.forEach((file) => {
            resultList.forEach((element) => {
              if (file.name === element.name) {
                file.filePath = element.filePath;
              }
            });
          });
          console.log(proxy.fileList);
        }
      );
    }

    // 检查文件是否齐全
    function isFileComplete() {
      // 声明
      let fileFlag = true;
      // 检查
      proxy.fileList.forEach((file) => {
        if (file.filePath === "") fileFlag = false;
      });

      // 提示
      !fileFlag &&
        ElMessage({
          message: "请确认所有文件都已上传",
          type: "error",
          duration: 5000,
        });

      // 返回
      return fileFlag;
    }

    return {
      confirmUpload,
      uploadFilePath,
      handleFileChangeIndiv,
      handleFileChangeInter,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../less/variables.less";
.blacktopUpload {
  height: 94%;
  width: 100%;
  position: relative;
  top: 3px;
}

.uploadContainer {
  // border: @border;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  > div {
    // border: @border;
    width: 100%;
  }
  > .title {
    flex: 0.05;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    > .icon {
      border-radius: 50%;
      width: 35px;
      height: 35px;
      background-color: @red;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 0.5%;
      > img {
        object-fit: cover;
        position: relative;
        width: 80%;
        height: 80%;
      }
    }
    > span {
      font-weight: bold;
      font-family: "华文中宋";
      font-size: 150%;
    }
  }
  > .file {
    flex: 0.25;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    > div {
      // border: @border;
      height: 100%;
    }
    > .file-Indiv {
      flex: 0.5;
      padding-right: 1%;
      > .uploadFile {
        flex: 1;
        // border: @border;
        // height: 20%;
        display: flex;
        flex-direction: column;
        margin-bottom: 3%;
        > div {
          display: flex;
          align-items: center;
          flex-direction: row;
        }
      }
    }
    > .file-Inter {
      flex: 0.5;
      > .content {
        > .uploadButton {
          margin: 1% 0%;
          width: 100%;
        }
        > .filePath {
          border: gray 1px dashed;
          border-radius: 5px;
          padding: 0 1%;
          display: flex;
          align-items: center;
          flex-direction: column;
          height: auto;
          > div {
            width: 100%;
            margin: 2% 0;
          }
        }
      }
    }
  }
  > .describe {
    flex: 0.1;
    display: flex;
    flex-direction: row;
    > .describeInput {
      flex: 1;
    }
  }
  > .confirm {
    flex: 0.6;
    > .confirmButton {
      background-color: @red;
      border-radius: 5px;
      font-weight: bold;
      color: white;
      padding: 0.5%;
      width: 10%;
      display: flex;
      align-items: center;
      justify-content: center;
      > img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
    }
    > .confirmButton:hover {
      cursor: pointer;
      background-color: @hoverRed;
    }
  }
}

.title {
  margin-bottom: 1%;
  display: flex;
  align-items: center;
  flex-direction: row;
  > .uploadBar {
    background-color: @red;
    height: 20px;
    width: 0px;
    border-radius: 50px;
    // margin-right: 5px;
  }
}

.content {
  > .uploadButton {
    border-radius: 5px;
    background-color: @red;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 35px;
    margin-right: 1%;
    > img {
      position: relative;
      width: 25px;
      height: 25px;
    }
  }
  > .uploadButton:hover {
    cursor: pointer;
    background-color: @hoverRed;
  }
  > .filePath {
    color: gray;
    height: 35px;
    display: flex;
    align-items: flex-end;
    padding: 0 1.5% 0.25% 0%;
  }
}
</style>